  <template>
    <style>
      .search-bubble {
        --search-bubble-color: var(--paper-yellow-500);
        position: absolute;
        z-index: 1;
      }

      .search-bubble-innards {
        align-items: center;
        background-color: var(--search-bubble-color);
        border-radius: 2px;
        color: var(--google-grey-900);
        max-width: 100px;
        min-width: 64px;
        overflow: hidden;
        padding: 4px 10px;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      /* Provides the arrow which points at the anchor element. */
      .search-bubble-innards::after {
        background-color: var(--search-bubble-color);
        content: '';
        height: 10px;
        left: calc(50% - 5px);
        position: absolute;
        top: -5px;
        transform: rotate(-45deg);
        width: 10px;
        z-index: -1;
      }

      /* Turns the arrow direction downwards, when the bubble is placed above
       * the anchor element */
      .search-bubble-innards.above::after {
        bottom: -5px;
        top: auto;
        transform: rotate(-135deg);
      }
    </style>
  </template>
